"use client"

import { useState, useEffect } from "react"
import { Search, Trophy, User } from "lucide-react"
import { Input } from "@/components/ui/input"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { useAuth } from "@/lib/auth/auth-context"

export default function BartenderHome() {
  const [input, setInput] = useState("")
  const router = useRouter()
  const { user, isAuthenticated } = useAuth()

  const actions = [
    { icon: "🎯", label: "随机盲盒" },
    { icon: "📚", label: "酒品知识" },
    { icon: "🏆", label: "经典系列" },
  ]

  return (
    <div className="min-h-screen bg-[#f9f8f6] flex flex-col">
      {/* Header with Auth Buttons */}
      <div className="w-full bg-white py-3 px-4 border-b">
        <div className="max-w-3xl mx-auto flex justify-between items-center">
          <h1 className="text-xl font-medium text-gray-900">ByteSlinger 调酒师</h1>
          <div>
            {isAuthenticated ? (
              <Button 
                variant="ghost" 
                className="flex items-center gap-2"
                onClick={() => router.push("/profile")}
              >
                <User className="h-4 w-4" />
                <span>{user?.name}</span>
              </Button>
            ) : (
              <div className="flex gap-2">
                <Button 
                  variant="ghost" 
                  onClick={() => router.push("/login")}
                >
                  登录
                </Button>
                <Button 
                  variant="default"
                  onClick={() => router.push("/register")}
                >
                  注册
                </Button>
              </div>
            )}
          </div>
        </div>
      </div>
      
      {/* Main Content */}
      <div className="flex-1 flex items-center justify-center p-4">
        <div className="w-full max-w-3xl space-y-12 text-center">
          {/* Greeting */}
          <div className="space-y-4">
            <h1 className="text-5xl font-medium text-gray-900 animate-fade-in">欢迎来到 ByteSlinger 调酒师</h1>
            <p className="text-xl text-gray-500 animate-fade-in-delayed">只属于你的专业调酒师</p>
          </div>

          {/* Search Input */}
          <div className="animate-slide-up relative group">
            <Input
              value={input}
              onChange={(e) => setInput(e.target.value)}
              className="w-full h-14 pl-12 text-lg rounded-2xl border-2 border-gray-200 
                      bg-white/70 backdrop-blur-sm transition-all duration-300
                      focus:border-emerald-500 focus:ring-emerald-500 focus:ring-2 focus:ring-offset-2
                      group-hover:border-gray-300 group-hover:shadow-lg"
              placeholder="询问饮品配方或寻求推荐..."
            />
            <div className="absolute left-4 top-1/2 -translate-y-1/2">
              <Search className="w-5 h-5 text-gray-400 transition-colors duration-200 group-hover:text-emerald-500" />
            </div>
          </div>

          {/* Action Buttons */}
          <div className="grid grid-cols-2 md:grid-cols-3 gap-4 animate-slide-up-delayed">
            {actions.map((action) => (
              <button
                key={action.label}
                onClick={() => {
                  localStorage.setItem('pendingQuestion', input.trim())
                  localStorage.setItem('selectedCategory', action.label)
                  router.push("/chat")
                }}
                className="group relative p-6 rounded-2xl bg-white/70 backdrop-blur-sm border-2 border-gray-100
                         hover:border-emerald-500 hover:shadow-lg transition-all duration-300
                         focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
              >
                <div className="flex flex-col items-center gap-3">
                  <span className="text-3xl transform transition-transform duration-300 group-hover:scale-110">
                    {action.icon}
                  </span>
                  <span className="text-gray-700 font-medium group-hover:text-emerald-600 transition-colors duration-300">
                    {action.label}
                  </span>
                </div>
              </button>
            ))}
          </div>

          {/* Public Cabinet Button */}
          <div className="animate-slide-up-delayed pt-4 flex justify-center gap-4">
            <button
              onClick={() => router.push("/public-cabinet")}
              className="group inline-flex items-center gap-2 px-6 py-3 rounded-full 
                       bg-gray-100 text-gray-800 hover:bg-gray-200 transition-all duration-300
                       focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2"
            >
              <Trophy className="w-5 h-5" />
              <span>大家的酒柜</span>
              <span className="inline-block transition-transform duration-300 group-hover:translate-x-1">→</span>
            </button>
            
            {isAuthenticated && (
              <button
                onClick={() => router.push("/cabinet")}
                className="group inline-flex items-center gap-2 px-6 py-3 rounded-full 
                         bg-emerald-100 text-emerald-800 hover:bg-emerald-200 transition-all duration-300
                         focus:outline-none focus:ring-2 focus:ring-emerald-300 focus:ring-offset-2"
              >
                <User className="w-5 h-5" />
                <span>我的酒柜</span>
                <span className="inline-block transition-transform duration-300 group-hover:translate-x-1">→</span>
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

